////
/// Components
/// Button variants
////

.Button--isActive {
  color: white;
  background-color: get-color(coal, dark);

  &:focus,
  &:hover {
    color: white;
    background-color: get-color(brand, blue);
    border-color: get-color(brand, blue);
  }

  &:active {
    color: white;
    background-color: darken(get-color(brand, blue), 10%);
    border-color: darken(get-color(brand, blue), 10%);
  }

  &:disabled {
    pointer-events: none;
    color: white;
    background-color: get-color(ash);
    border-color: get-color(ash);
  }
}

.Button--typePill {
  border-radius: get-type-scale(button) * 2;
}
